import React, { Component } from 'react';
import { View, StyleSheet, Text, Alert, ActivityIndicator, FlatList, RefreshControl } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { List, Flex, Toast, Badge, WingBlank, WhiteSpace } from '@ant-design/react-native';
import Item from '@ant-design/react-native/lib/list/ListItem';
import { getCompanyBuildingChatList } from '~/api/message';
import { getParkingOrderList } from '~/api/company';
import Developpark from '~/components/developpark';
let pagecount = 0;
let index = 1;
let size = 10;
class DeveloperConsulting extends Component {
    static navigationOptions = {
        title: '咨询列表',
    };
    constructor(props) {
        super(props);
        this.state = {
            id: '',
            list: [],
            page_index: 1,
            page_size: 10,
            isLoading: false, //加载
            refreshing: false,
            footer: 0, //上拉底部显示
            view_state: this.props.navigation.getParam('view_state'),
        };
        this.getList();
    }
    getList = () => {
        getCompanyBuildingChatList({
            page_index: this.state.page_index,
            page_size: this.state.page_size,
        }).then((r) => {
            if (r.code === 0) {
                // Toast.info('成功', 1);
                console.log(r.data.list);
                this.setState({
                    list: r.data.list,
                    footer: 0,
                });
                if (this.state.page_index === 1) {
                    pagecount = r.data.total_page_count;
                    this.setState({
                        footer: r.data.total_item_count < 10 ? 2 : 0,
                    });
                }
            } else {
                Toast.info('失败', 1);
            }
        });
    };
    _onRefresh() {
        this.setState({ footer: 0, page_index: index, page_size: size }, () => {
            this.getList();
        });
    }
    //上拉加载更多
    loadData = () => {
        this.setState({ isLoading: false });
        let dataArray = [];
        if (pagecount - 1 > 0) {
            pagecount = pagecount - 1;
            this.setState(
                {
                    page_index: this.state.page_index + 1,
                    footer: 1,
                },
                () => {
                    getCompanyBuildingChatList({
                        page_index: this.state.page_index,
                        page_size: this.state.page_size,
                    }).then((r) => {
                        if (r.code === 0) {
                            dataArray = r.data.list;
                            dataArray = this.state.list.concat(dataArray);
                            this.setState({
                                list: dataArray,
                                isLoading: false,
                            });
                        } else {
                            Toast.info('失败', 1);
                        }
                    });
                },
            );
        } else {
            this.setState({
                footer: 2,
            });
        }
    };

    //上拉底部显示
    genIndicator() {
        if (this.state.footer === 1) {
            return (
                <View style={styles.indicatorContainer}>
                    <ActivityIndicator style={styles.indicator} size={'large'} animating={true} />
                    <Text style={{ textAlign: 'center' }}>正在加载更多</Text>
                </View>
            );
        } else if (this.state.footer === 2) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.footer === 0) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        上拉加载更多
                    </Text>
                </View>
            );
        }
    }
    _renderItem(item) {
        return (
            <Flex
                onPress={() => {
                    this.props.navigation.push('Chat', {
                        id: 0,
                        getList: this.getList,
                        route: 1,
                        CompanyBuildingID: item.CompanyBuildingID,
                        OwnerDataID: item.OwnerDataID,
                    });
                }}>
                <View style={styles.itemview}>
                    <Flex justify="between">
                        <Text style={styles.itemtext}>
                             {item.BuildingName}
                        </Text>
                        <Text style={styles.itemtext}>
                             业主：{item.OwnerName}
                        </Text>
                    </Flex>
                    <Flex direction={'row'} justify={'between'} style={{flex: 1}}>
                        <Text style={{ color: '#666666', fontSize: 12, marginTop: 5 }}>地址：{item.CityName}{item.Address}</Text>
                        <Flex style={{marginRight: 10, marginBottom: '6%'}}>
                        {item.ViewState == 0 ? <Badge dot={true} /> : null}
                        </Flex>
                    </Flex>
                </View>
            </Flex>
        );
    }
    render() {
        return (
            <WingBlank size={'lg'}>
                <FlatList
                    data={this.state.list}
                    showsVerticalScrollIndicator={false}
                    renderItem={(data) => this._renderItem(data.item)}
                    keyExtractor={(item, index) => index}
                    ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
                    onEndReached={() => {
                        this.loadData();
                    }}
                    onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                    refreshing={true}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={() => {
                                this._onRefresh();
                            }}
                        />
                    }
                />
            </WingBlank>
        );
    }
}
export default DeveloperConsulting;

const styles = StyleSheet.create({
    scrollview: {
        flex: 1,
    },
    list: {
        width: '100%',
        flexDirection: 'column',
        marginTop: 10,
    },
    itemtext: {
        fontSize: 15,
    },
    itemview: {
        width: '100%',
        padding: 10,
        backgroundColor: 'white',
        marginTop: 10,
        borderRadius: 10,
    },
});
